<template>
  <div id="login">
    <section class="login-warp">
      <section class="logo-warp">
        <img class="logo-img" src="@/assets/long.jpeg" alt="">
        <span class="logo-title">龙行天下</span>
      </section>
      <el-form style="width: 250px;margin: 0 auto;" :model="loginForm" ref="loginFormRef" label-width="0px" class="demo-ruleForm">
        <el-form-item
          prop="account"
          :rules="[
            { required: true, message: '账号不能为空'},
          ]"
        >
          <el-input prefix-icon="el-icon-user" style="width: 250px" v-model="loginForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          :rules="[
            { required: true, message: '密码不能为空'},
          ]"
        >
          <el-input prefix-icon="el-icon-lock" style="width:250px" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <section style="display: flex; justify-content: space-between">
            <el-checkbox v-model="checked">自动登录</el-checkbox>
            <el-link :underline="false" type="primary">忘记密码</el-link>
          </section>
        </el-form-item>

        <el-form-item>
          <el-button style="width:250px" type="primary" @click="submitForm('loginFormRef')">提交</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, onMounted } from 'vue'
  import { LoginParam } from './index'
  import { ElMessage } from 'element-plus'
  import Api from '@/services/commonApi';
  export default defineComponent({
    name: "index",
    setup() {
      const loginForm = reactive<LoginParam>({account: '', password: ''})
      const checked = ref(false)
      return {
        loginForm,
        checked,
      }
    },
    methods: {
      /**
       * click login bth
       * @param loginForm
       */
      submitForm(loginForm:string) {
        (this.$refs[loginForm] as {} & {validate:Function}).validate((valid: boolean, value: LoginParam) => {
          if(valid) {
            Api.post('/login', this.loginForm).then((res: any) => {
              console.log('res', res)
              if(res.data.code != -1) {
                this.$router.push('/home')
              } else {
                ElMessage.warning({
                  message: '账号或者密码错误请重新输入',
                  type: 'warning'
                })
              }
            })
          }
        })
      }
    }
  })
</script>

<style scoped lang="less">
 #login {
   height: 100vh;
   background-image: url('../../assets/login-bg.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
   justify-content: center;
   align-items: center;
   .login-warp {
     height: 420px;
     width: 420px;
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     padding: 40px;
     box-sizing: border-box;
     .logo-warp {
       margin-bottom: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       .logo-img {
         height: 50px;
         width: 50px;
       }
       .logo-title {
         font-size: 25px;
         font-weight: 600;
         color: #000;
         margin-left: 15px;
         font-family: "STKaiti";
       }
     }
   }
 }
</style>
